<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>消息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">全部</li>
                        <li>站内信</li>
                        <li>通知</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-row vip-btn-tool-box mar-btm">
                                <div class="layui-col-sm6">
                                    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" id="vip-btn-add" title="新增"><i class="vip-icon">&#xe65c;</i></button>
                                    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" id="vip-btn-del" title="删除"><i class="vip-icon">&#xe664;</i></button>
                                    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" id="vip-btn-refresh" title="刷新"><i class="vip-icon">&#xe68a;</i></button>
                                </div>
                            </div>
                            <div id="demo-table-1" lay-filter="table"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div id="demo-table-2" lay-filter="table"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div id="demo-table-3" lay-filter="table"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/html" id="menu">
    <button class="layui-btn layui-btn-xs layui-bg-cyan" lay-event="view">查看</button>
    <button class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</button>
</script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.config({base: '../js/'}).use(['app','element','layer','table'],function(){
    var $ = layui.$, app = layui.app, element = layui.element, layer = layui.layer, table = layui.table;

    // 全部消息
    var tableIns = table.render({
        elem: '#demo-table-1'
        ,id: 'table-id-1'
        ,skin: 'line'                       // 行风格
        ,url: '../json/demo-msg.json'       //数据接口
        ,page: true                         // 开启分页
        ,loading: true                      // 开启loading
        ,cellMinWidth: 80                   // 每列最小宽度
        ,limits: [15,30,50]                 // 每页条数的选择项
        ,limit: 15                          // 默认每页条数
        ,cols: [[                           //表头
            {type: 'checkbox', fixed: 'left'}
            ,{field: 'id', title: 'ID', sort: true}
            ,{field: 'title', title: '标题'}
            ,{field: 'time', title: '时间'}
            ,{field: 'status', title: '状态'}
            ,{title: '操作', fixed: 'right', templet:'#menu'}
        ]]
    });

    // 站内信
    table.render({
        elem: '#demo-table-2'
        ,id: 'table-id-2'
        ,skin: 'line'                       // 行风格
        ,url: '../json/demo-msg.json'       //数据接口
        ,page: true                         // 开启分页
        ,loading: true                      // 开启loading
        ,cellMinWidth: 80                   // 每列最小宽度
        ,limits: [15,30,50]                 // 每页条数的选择项
        ,limit: 15                          // 默认每页条数
        ,cols: [[                           //表头
            {type: 'checkbox', fixed: 'left'}
            ,{field: 'id', title: 'ID', sort: true}
            ,{field: 'title', title: '标题'}
            ,{field: 'time', title: '时间'}
            ,{field: 'status', title: '状态'}
            ,{title: '操作', fixed: 'right', templet:'#menu'}
        ]]
    });

    // 通知
    table.render({
        elem: '#demo-table-3'
        ,id: 'table-id-3'
        ,skin: 'line'                       // 行风格
        ,url: '../json/demo-msg.json'       //数据接口
        ,page: true                         // 开启分页
        ,loading: true                      // 开启loading
        ,cellMinWidth: 80                   // 每列最小宽度
        ,limits: [15,30,50]                 // 每页条数的选择项
        ,limit: 15                          // 默认每页条数
        ,cols: [[                           //表头
            {type: 'checkbox', fixed: 'left'}
            ,{field: 'id', title: 'ID', sort: true}
            ,{field: 'title', title: '标题'}
            ,{field: 'time', title: '时间'}
            ,{field: 'status', title: '状态'}
            ,{title: '操作', fixed: 'right', templet:'#menu'}
        ]]
    });

    // 监听添加按钮
    $('#vip-btn-add').on('click',function(){
        layer.alert('你点击了添加按钮');
    });

    // 监听多选删除按钮
    $('#vip-btn-del').on('click',function(){
        var checkStatus = table.checkStatus('table-id-1'); // table-id-2 即为基础参数id对应的值

        if(!checkStatus.data.length){
            layer.msg('未选中数据');
            return false;
        }

        if(checkStatus.isAll){
            layer.msg('全选了:'+ app.getIds(checkStatus.data) );
        }else{
            layer.msg( app.getIds(checkStatus.data) );
        }

        console.log(checkStatus.data);
        //console.log(checkStatus.data);        //获取选中行的数据
        //console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
        //console.log(checkStatus.isAll );      //表格是否全选
    });

    // 监听表格刷新
    $('#vip-btn-refresh').on('click',function(){
        // 重载方式 1
        tableIns.reload();
        // 重载方式 2
        // table.reload('table-id-1', {})
    });

    //监听工具条
    table.on('tool(table)', function(obj){
        var data = obj.data;            //获得当前行数据
        var layEvent = obj.event;       //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr;                //获得当前行 tr 的DOM对象

        if(layEvent === 'view'){ // 查看

            layer.msg('点击了查看');
            // do somehing

        } else if(layEvent === 'del'){ //删除

            layer.confirm('真的删除行么?', function(index){
                obj.del(); // 删除对应行（tr）的DOM结构
                layer.close(index);
                // do somehing
            });

        }
    });
});
</script>
</body>
</html>